<template>
	<view class="my-addcity flex" v-if="isshow">
		<view class="mask animated" :class="{ fadeIn: anim, fadeOut: !anim }" @click="addigclose"></view>
		<view class="contents animated" :class="{ fadeInUp: anim, fadeOutDown: !anim }">
			<view class="digcity">
				<!-- <view class="hd jj_kb_a flex">
					<view class="item ell" :class="{ active: addressTab == 1 }" @click="resetProvince">{{ codeProvinceName
						? codeProvinceName : '请选择省' }}</view>
					<view v-if="showCityTab" class="item ell" :class="{ active: addressTab == 2 }" @click="resetCity">{{
						codeCityName ? codeCityName : '请选择市' }}</view>
					<view v-if="showAreaTab" class="item ell" :class="{ active: addressTab == 3 }">{{ codeAreaName ?
						codeAreaName : '请选择地区' }}</view>
				</view> -->

				<view class="hd jj_kb_a flex">
					<block v-for="(item, index) in top_list" :key="index">
						<view class="item ell" :class="{ active: addressTab == item.ct_level }" @click="top_click(item)" v-if="addressTab >= item.ct_level">
							{{ item.ct_name ? item.ct_name : item.ct_name_null }}
						</view>
					</block>
				</view>

				<view class="bd">
					<scroll-view class="scroll_y" scroll-y="true">
						<view class="row">
							<block v-for="(item, index) in row_list" :key="index">
								<view class="item" :class="{ active: item.ct_id == codeCityId }" @click.prevent.stop="row_click(item)">
									{{ item.ct_name }}
								</view>
							</block>

							<!-- <block v-if="addressTab == 1">
								<view class="item" :class="{ active: item.ct_id == codeProvince }"
									v-for="(item, index) in proviceListData" :key="index"
									@click.prevent.stop="chooseProvince(item.ct_id, index)">
									{{ item.ct_name }}
								</view>
							</block>
							<block v-if="addressTab == 2">
								<view class="item" :class="{ active: item.ct_id == codeCity }"
									v-for="(item, index) in cityListData" :key="index"
									@click.prevent.stop="chooseCity(item.ct_id, index)">
									{{ item.ct_name }}
								</view>
							</block>
							<block v-if="addressTab == 3">
								<view class="item" :data-value="item.ct_id" :data-v="codeArea"
									:class="{ active: item.ct_id == codeArea }" v-for="(item, index) in areaListData"
									:key="index" @click.prevent.stop="chooseArea(item.ct_id, index)">
									{{ item.ct_name }}
								</view>
							</block> -->
						</view>
					</scroll-view>
				</view>
				<view class="tool flex jj_kt_a">
					<view class="btns" @click="addigclose">取消</view>
					<view class="btns btns-primary" @click="sureselect">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
let init_list = [];
import storeMixin from '@/store/storeMixin';
export default {
	mixins: [storeMixin],
	name: 'digaddcity',
	props: {},
	data() {
		return {
			isshow: false,
			anim: false,
			defcityid: '', //默认地区id
			proviceListData: [],
			cityListData: [],
			areaListData: [],
			showCityTab: false,
			showAreaTab: false,
			addressTab: 1,
			codeCityId: '', //最终id
			codeProvince: '', //省code
			codeCity: '', //市code
			codeArea: '', //区code
			codeProvinceName: '', //省名字
			codeCityName: '', //市名字
			codeAreaName: '', //区名字
			top_list: [
				{
					ct_id: '',
					ct_level: 1,
					ct_name: '',
					ct_parent_id: 0,
					ct_name_null: '请选择省',
					key: 'proviceListData',
					child_key: 'cityListData',
					url: '/base/city',
					back_key: 'province',
				},
				{
					ct_id: '',
					ct_level: 2,
					ct_name: '',
					ct_parent_id: 0,
					ct_name_null: '请选择市',
					key: 'cityListData',
					child_key: 'areaListData',
					url: '/base/area',
					back_key: 'city',
				},
				{
					ct_id: '',
					ct_level: 3,
					ct_name: '',
					ct_parent_id: 0,
					ct_name_null: '请选择地区',
					key: 'areaListData',
					back_key: 'district',
				},
			],
			row_list: [],
		};
	},

	created() {
		init_list = this.deepclone(this.top_list);
		console.log(init_list);
		this.getareasList();
	},

	methods: {
		setcityjson(res) {
			let addcity_id = '';
			if (this.proviceListData.length > 0) {
				let provice = this.proviceListData.filter((elem, i) => {
					return res.provinceName.indexOf(elem.ct_name) !== -1;
				});
				if (provice.length > 0) {
					provice = provice[0];
					addcity_id = provice.ct_id;
					let city = provice.data.filter((elem, i) => {
						return res.cityName.indexOf(elem.ct_name) !== -1;
					});
					if (city.length > 0) {
						city = city[0];
						addcity_id = city.ct_id;
						let area = city.data.filter((elem, i) => {
							return res.countyName.indexOf(elem.ct_name) !== -1;
						});
						if (area.length > 0) {
							area = area[0];
							addcity_id = area.ct_id;
						}
					}
				}
				this.geteditaddress(addcity_id, 1);
			}
		},

		//默认选中省市区
		// geteditaddress(citycode, tt = 0) {
		// 	if (citycode) {
		// 		let provice_id = citycode.substring(0, 2);
		// 		provice_id = provice_id + '0000';
		// 		let provice_data = this.proviceListData.filter((elem, i) => {
		// 			return elem.ct_id == provice_id;
		// 		});
		// 		if (provice_data.length > 0) {
		// 			provice_data = provice_data[0];
		// 			this.addressTab = 1;
		// 			this.showCityTab = false;
		// 			this.showAreaTab = false;
		// 			this.codeProvinceName = provice_data.ct_name;
		// 			this.codeProvince = provice_data.ct_id;
		// 			this.cityListData = provice_data.data;
		// 			let city_id = citycode.substring(0, 4);
		// 			city_id = city_id + '00';
		// 			let city_data = provice_data.data.filter((elem, i) => {
		// 				return elem.ct_id == city_id;
		// 			});
		// 			if (city_data.length > 0) {
		// 				city_data = city_data[0];
		// 				this.addressTab = 2;
		// 				this.showCityTab = true;
		// 				this.showAreaTab = false;
		// 				this.codeCityName = city_data.ct_name;
		// 				this.codeCity = city_data.ct_id;
		// 				this.areaListData = city_data.data;
		// 				let area_data = city_data.data.filter((elem, i) => {
		// 					return elem.ct_id == citycode;
		// 				});
		// 				if (area_data.length > 0) {
		// 					area_data = area_data[0];
		// 					this.addressTab = 3;
		// 					this.showCityTab = true;
		// 					this.showAreaTab = true;
		// 					this.codeArea = area_data.ct_id;
		// 					this.codeAreaName = area_data.ct_name;
		// 				}
		// 			}
		// 		}
		// 	} else {
		// 		this.addressTab = 1;
		// 		this.showCityTab = false;
		// 		this.showAreaTab = false;
		// 		this.codeProvince = '';
		// 		this.codeCity = '';
		// 		this.codeArea = '';
		// 		this.codeProvinceName = '';
		// 		this.codeCityName = '';
		// 		this.codeAreaName = '';
		// 	}
		// 	if (tt == 1) {
		// 		let res = {
		// 			quyu: this.codeProvinceName + this.codeCityName + this.codeAreaName,
		// 			add_citycode: citycode
		// 		};
		// 		this.$emit('wxchoosecode', res);
		// 	}
		// },

		// 设置选中
		async geteditaddress(citycode, tt = 0) {
			let _this = this;
			if (!citycode) return;
			let p = `${citycode.substring(0, 2)}0000`;
			let c = `${citycode.substring(0, 4)}00`;
			let a = `${citycode.substring(0, 6)}`;
			let code_arr = [p, c, a];

			for (let i = 0; i < code_arr.length; i++) {
				const _config = _this.top_list[i];
				const _judgecode = code_arr[i];
				if (i == 0) {
					for (let ii = 0; ii < _this[_config.key].length; ii++) {
						let for_item = _this[_config.key][ii];
						if (_judgecode == for_item.ct_id) {
							_this.row_click(for_item, 1);
							break;
						}
					}
				} else {
					let _parent_item = _this.top_list[i - 1];
					let _parent_id = code_arr[i - 1];
					let child_list = await _this.async_list({ url: _parent_item.url, id: _parent_id });
					_this[_parent_item.child_key] = _this.row_list = child_list;
					for (let ii = 0; ii < child_list.length; ii++) {
						let for_item = child_list[ii];
						// console.log(_judgecode, child_list[ii].ct_id, 'i')
						if (_judgecode == for_item.ct_id) {
							_this.row_click(for_item, 1);
							break;
						}
					}
				}

				// let back_list = await async_list({ url:, id: element })
			}

			// let p_item = this.row_list.filter(vv => {
			// 	return vv.ct_id == p
			// })

			// if (p_item) {
			// 	this.row_click(p_item[0])
			// }

			// let c_item = this.row_list.filter(vv => {
			// 	return vv.ct_id == c
			// })
			// if (c_item) {

			// 	this.row_click(c_item[0])
			// }
		},

		async_list(e) {
			console.log(e, 'async_list');
			let { url, id } = e;
			let _this = this,
				_config;

			// #ifdef APP-PLUS
			_config = getApp().globalData.that;
			// #endif

			// #ifndef APP-PLUS
			_config = this;
			// #endif

			return new Promise((resolve, reject) => {
				uni.request({
					header: _config.headers,
					url: _config.apiUrl + _config.apiFilename + url,
					method: 'GET',
					data: {
						id,
					},
					success(res) {
						// let data = res.data.data;
						// _this.proviceListData = data;
						let data = res.data;
						if (data.state == 1) {
							resolve(data.info);
						}
					},
				});
			});
		},

		fundig(id) {
			this.anim = true;
			this.isshow = true;
			this.defcityid = id;
			this.geteditaddress(this.defcityid);
		},

		//关闭弹出框
		addigclose() {
			let _this = this;
			this.anim = false;
			setTimeout(() => {
				_this.isshow = false;
			}, 300);
			this.$emit('addigclose');
		},

		//确认省市区
		sureselect() {
			// if (this.codeProvince) {
			// 	this.codeCityId = this.codeProvince;
			// }
			// if (this.codeCity) {
			// 	this.codeCityId = this.codeCity;
			// }
			// if (this.codeArea) {
			// 	this.codeCityId = this.codeArea;
			// }
			let _this = this;
			let res = {
				// quyu: this.codeProvinceName + this.codeCityName + this.codeAreaName,
				// add_citycode: this.codeCityId,
				// islast: this.codeCityId == this.codeArea ? true : false
			};
			let form_data = {};

			let quyu = '';
			for (let index = 0; index < _this.top_list.length; index++) {
				let v = _this.top_list[index];
				form_data[v.back_key] = v.ct_name;
				form_data[`${v.back_key}_code`] = v.ct_id;
				quyu += v.ct_name;
				if (v.ct_id) {
					res.ct_level = v.ct_level;
					res.add_citycode = v.ct_id;
				}
			}
			res.quyu = quyu;
			res.form_data = form_data;

			console.log(res);

			this.addigclose();
			this.$emit('addigcitys', res);
		},

		//获取省
		getareasList() {
			let _this = this;
			uni.request({
				header: this.headers,
				url: this.apiUrl + this.apiFilename + '/base/province',
				method: 'GET',
				success(res) {
					// let data = res.data.data;
					// _this.proviceListData = data;
					let data = res.data;
					let ExcludeKeys = [
						{
							oldV: '上海市',
							newV: '上海',
						},
						{
							oldV: '重庆市',
							newV: '重庆',
						},
						{
							oldV: '天津市',
							newV: '天津',
						},
						{
							oldV: '北京市',
							newV: '北京',
						},
					];
					data.info.forEach(vv => {
						for (let item of ExcludeKeys) {
							vv.ct_name = vv.ct_name.replace(new RegExp(item.oldV, 'g'), item.newV);
						}
					});

					if (data.state == 1) {
						_this.proviceListData = _this.row_list = data.info;
					}
				},
				fail: res => {
					uni.showToast({
						icon: 'none',
						title: '网络请求错误',
					});
				},
			});
		},
		top_click(item) {
			let { ct_level } = item;
			let _this = this;
			_this.addressTab = ct_level;
			_this.row_list = _this[item.key];

			for (let index = ct_level; index <= init_list.length; index++) {
				// const element = array[index];
				_this.top_list[index - 1] = init_list[index - 1];
			}

			// console.log({
			// 	proviceListData: _this.proviceListData,
			// 	cityListData: _this.cityListData,
			// 	areaListData: _this.areaListData,
			// }, 'top_click_top_click')
		},

		row_click(item, asyncmode = 0) {
			let _this = this;
			let { ct_level, ct_id } = item;
			let index = _this.addressTab - 1;
			Object.assign(_this.top_list[index], item);
			_this.codeCityId = ct_id;

			if (asyncmode == 0) {
				_this.get_child_list(_this.top_list[index]);
			}
			_this.addressTab = _this.addressTab >= _this.top_list.length ? _this.top_list.length : ++ct_level;
		},
		get_child_list(item) {
			let _this = this;

			let { ct_level, ct_id, child_key, url, ct_parent_id } = item;

			if (ct_level == _this.top_list.length) return;
			uni.request({
				header: this.headers,
				url: this.apiUrl + this.apiFilename + url,
				method: 'GET',
				data: {
					id: ct_id,
				},
				success(res) {
					// let data = res.data.data;
					// _this.proviceListData = data;
					let data = res.data;
					if (data.state == 1) {
						_this[child_key] = _this.row_list = data.info;
					}

					// console.log({
					// 	proviceListData: _this.proviceListData,
					// 	cityListData: _this.cityListData,
					// 	areaListData: _this.areaListData,
					// }, 'get_child_list')
				},
				fail: res => {
					uni.showToast({
						icon: 'none',
						title: '网络请求错误',
					});
				},
			});
		},

		//选中省
		chooseProvince(id, index) {
			this.codeProvince = id;
			this.cityListData = this.proviceListData[index].data;
			this.codeProvinceName = this.proviceListData[index].ct_name;
			this.codeCityId = this.proviceListData[index].ct_id;
			this.addressTab = 2;
			this.showCityTab = true;
		},

		//选中市
		chooseCity(id, index) {
			this.areaListData = this.cityListData[index].data;
			this.codeCity = id;
			this.codeCityName = this.cityListData[index].ct_name;
			this.codeCityId = this.cityListData[index].ct_id;
			this.addressTab = 3;
			this.showAreaTab = true;
		},

		//选择区
		chooseArea(id, index) {
			this.codeArea = id;
			this.codeAreaName = this.areaListData[index].ct_name;
			this.codeCityId = this.areaListData[index].ct_id;
		},

		//重置省
		resetProvince() {
			this.addressTab = 1;
			this.codeProvince = '';
			this.codeCity = '';
			this.codeArea = '';
			this.showCityTab = false;
			this.showAreaTab = false;
			this.codeProvinceName = '';
			this.codeCityName = '';
			this.codeAreaName = '';
			this.cityListData = this.$options.data().cityListData;
		},

		//重置市
		resetCity() {
			this.addressTab = 2;
			this.codeCity = '';
			this.codeArea = '';
			this.showAreaTab = false;
			this.codeCityName = '';
			this.codeAreaName = '';
			this.areaListData = this.$options.data().areaListData;
		},
	},
	watch: {
		// citycode(newVal) {
		// 	if (newVal == 1) { }
		// }

		addressTab(newVal) {},
	},
};
</script>

<style lang="scss">
.my-addcity {
	width: 100%;
	height: 100%;
	align-items: flex-end;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 99999;

	.mask {
		width: 100%;
		height: 100%;
		background: rgba($color: #000000, $alpha: 0.5);
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
		animation-duration: 0.1s;
	}

	.contents {
		width: 100%;
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;
		position: relative;
		z-index: 2;
		animation-duration: 0.4s;

		.digcity {
			.hd {
				padding-left: 38rpx;

				&::after {
					background: var(--primary-bg-color);
				}

				.item {
					max-width: 33.33%;
					height: 100rpx;
					line-height: 100rpx;
					padding: 0 20rpx;
					font-size: 26rpx;
					color: var(--primary-theme-color);
					position: relative;
					z-index: 2;

					font-weight: 700;

					&.active {
						color: var(--primary-theme-color);

						&::before {
							content: '';
							width: 42rpx;
							height: 42rpx;
							border-style: solid;
							border-width: 1px;
							border-color: var(--primary-theme-color) var(--primary-theme-color) transparent transparent;
							transform: rotate(-45deg) translateX(-100%) scale(0.333333);
							position: absolute;
							left: 50%;
							bottom: 11rpx;
							z-index: 1;
						}

						&::after {
							content: '';
							width: 20rpx;
							height: 1px;
							background: #fff;
							position: absolute;
							left: 50%;
							bottom: 0;
							transform: scale(1, 0.33333333) translate(-100%, 1px);
							z-index: 2;
						}
					}
				}
			}

			.bd {
				position: relative;

				// padding: 20rpx 0;

				.scroll_y {
					height: calc(70vh - 240rpx);

					.row {
						padding: 0 58rpx;

						.item {
							padding: 26rpx 0;
							font-size: 28rpx;

							&.active {
								color: var(--primary-theme-color);
							}
						}
					}
				}
			}

			.tool {
				width: 100%;
				// box-shadow: 0 -6rpx 4rpx rgba($color: #000004, $alpha: 0.06);

				.btns {
					flex: 1;
					height: 100rpx;
					line-height: 100rpx;
					background: #fff;
					font-size: 28rpx;
					color: var(--primary-theme-color);
					text-align: center;

					&.btns-primary {
						background: var(--primary-bg-color);
						color: #fff;
					}
				}
			}
		}
	}
}
</style>
